<%@ page session="false" language="java" contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include.inc.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>运行养护</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="${contextPath}/resources/assets/css/bootstrap.css" />
<link rel="stylesheet" href="${contextPath}/resources/assets/css/font-awesome.css" />
<link rel="stylesheet" href="${contextPath}/resources/assets/css/ace-fonts.css" />
<link rel="stylesheet" href="${contextPath}/resources/assets/css/jquery-ui.css" />
<link rel="stylesheet" href="${contextPath}/resources/assets/css/bootstrap-switch.min.css" />
<link rel="stylesheet" href="${contextPath}/resources/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
<script src="${contextPath}/resources/assets/js/jquery.js"></script>
<script src="${contextPath}/resources/assets/js/ace-extra.js"></script>
	<style>
	.wrapper{
		width:960px;
        height: 594px;
        margin:0 auto;
	}

    </style>
</head>
<body class="no-skin" style="background:white;">
		<div class="wrapper">
            <div class="widget-box">
                <!--<div class="widget-header">
                    <h3 class="widget-title">
                        水泵
                    </h3>

                    <div class="widget-toolbar">
                        <a href="#" data-action="close">
                            <i class="ace-icon fa fa-times" style="line-height:35px;"></i>
                        </a>
                    </div>
                </div>-->

                <div class="widget-body">
                    <div class="widget-main">
                        <div class="top-part">
                            <div style="width:30%;height:40%;float:left;margin-left:10%">
                                <img src="${contextPath}/resources/Picture/xunkong/sbtb/pump.png" style="width:80%;height:80%;margin:10%;">
                            </div>
                            <div style="width:40%;height:40%;margin-left:45%;font-size:16px;font-family:'微软雅黑';font-weight:bold;line-height:20px;border:1px dashed #DBDBDB;">
                                <p style="width:100%;height:100%;padding:2%">
                                    <span>名称:工业级温湿度监控仪</span><br/>
                                    <span>设备编号:<span id="deviceCode">SB(N10)-01</span><br/>
                                    <span>供应商:xxxxx</span><br/>
                                    <span>型号:APTX-4876</span><br/>
                                    <span>采购时间:2016年8月14日</span><br/>
                                    <span>质保时间:2年</span><br/><br/>
                                    <span>水泵保养周期:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="interval"></span>天</span><br/>
                                    <span>水泵上次保养时间:&nbsp;&nbsp;&nbsp;<span id="lasttime"></span></span><br/>
                                    <span>液位仪保养周期:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="interval2"></span>天</span><br/>
                                    <span>液位仪上次保养时间:<span id="lasttime2"></span></span>
                                </p>
                            </div>
                        </div>
                        <hr/>
                        <div class="bottom-part">
                            <div style="width:40%;height:40%;float:left;font-size:30px;margin-left:20px;font-family:'微软雅黑';font-weight:bold;line-height:40px;">
                                <span style="display:inline;font-size:20px;margin-left:10%;">当前状态：<span id="state" style="color:green;font-size:25px;">开</span></span>
                                <span style="display:inline;font-size:20px;margin-left:5%;">当前水位：<span style="color:green;font-size:25px;" id="shuiwei"></span>cm</span>
                                <div style="float:right;margin-right:150px;margin-top:60px;height:30px;width:20px;display:inline;" class="switch"><input type="checkbox" checked></div>
                                <img id="device" src="${contextPath}/resources/Picture/xunkong/sbtb/pump_red.png" style="width:40%;height:70%;margin-left:10%;">
<!--                                <div style="float:right;margin-right:150px;margin-top:70px;height:30px;width:20px;display:inline;" class="switch"><input type="checkbox" checked></div>-->
                            </div>
                            <div style="width:45%;height:40%;margin-left:45%;font-size:18px;font-family:'微软雅黑';font-weight:bold">
                                <!--<textarea style="height:80%;width:90%;" id="record"></textarea>-->
                                <div style="width:90%;height:90%;margin:0 5%;overflow-y:scroll;">
                                    <table id="datatable" class="table table-striped table-bordered table-hover">
                                        <thead><tr><th>日期:<input type="button" id="datepick"  style="border:none;font-weight:normal;background-color:white;"></th><th>操作&nbsp;&nbsp;&nbsp;</th></tr></thead>
                                        <tbody>
                                           
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.widget-main -->
                </div><!-- /.widget-body -->
            </div>
        </div>

<script type="text/javascript">
   var contextPath = '${contextPath}';
</script>
  <script src="${contextPath}/resources/assets/js/ace/ace.js"></script>      
  <script src="${contextPath}/resources/assets/js/bootstrap.js"></script>      
  <script src="${contextPath}/resources/assets/js/jquery-ui.js"></script>    
  <script src="${contextPath}/resources/assets/js/bootstrap-switch.min.js"></script>      
        <!-- switch -->
  <script>
  (function(){
		var deviceCode=$("#deviceCode").html();
		var deviceCode2="YWY(N10)-01";
	   	var deviceName="水泵";
		var state;
	   	
	   	var today=new Date();
	  	var Mtoday=today.getMonth()+1;
	   	var Dtoday=today.getDate();
	  	var Ytoday=today.getFullYear();
	  	var MMtoday=(new String(Mtoday).length)==1?("0"+Mtoday):Mtoday;
	  	var DDtoday=(new String(Dtoday).length)==1?("0"+Dtoday):Dtoday;
      //获取保养信息
	      $.ajax({
				type:"post",
				async:false,
				url:"../loadInfo?DeviceCode="+deviceCode,
				success:function(data){
					$("#interval").html(data[0].interval);
					$("#lasttime").html(data[0].lastTime);
				}
			});
	      $.ajax({
				type:"post",
				async:false,
				url:"../loadInfo?DeviceCode="+deviceCode2,
				success:function(data){
					$("#interval2").html(data[0].interval);
					$("#lasttime2").html(data[0].lastTime);
				}
			});
		//获取开关状态
		$.ajax({
			url:"../loadData",
			cache:false,
			async:false,
			success:function(result){
				for(var i=0;i<result.length;i++){
					if(result[i].opcname=="DEMO.pump1_run"){
						state=result[i].opcvalue;
					}
				}
			}
	       })
		if(state=="false"){
			$('[type="checkbox"]').bootstrapSwitch({state:false});
			$("#device").attr("src","${contextPath}/resources/Picture/xunkong/sbtb/pump_blue.png");
            $("#state").html("关");
		}else{
			$('[type="checkbox"]').bootstrapSwitch({state:true});
			$("#device").attr("src","${contextPath}/resources/Picture/xunkong/sbtb/pump_red.png");
            $("#state").html("开");
		}
      //状态和开关
	     $('[type="checkbox"]').bootstrapSwitch();
	loaddata();
	setInterval(loaddata,3000);
	     
      //datepicker插件和选择日期后的触发事件
      	$("#datepick").datepicker({
     	  	showOtherMonths: true,
			selectOtherMonths: false,
 	  	});
	  	$("#datepick").change(function(){
	  		var date=$(this)[0].value;
	  		$.ajax({
	  			type:"post",
	  			async:false,
	  			url:encodeURI("../loadHistory?device="+deviceName+"&date="+date),
	  		    success:function(data){
	  		    	$("#datatable tbody tr").remove();
	  		    	for(var i=0;i<data.length;i++){
	  		    		$("#datatable tbody").append("<tr><th>"+data[i].time+"</th><th>"+(data[i].value==1?'开':'关')+"</th></tr>");
	  		    	}
	  		    }
	  		})
	  	})
 	  	//设置datepicker初始值和触发一次change
 	  	$("#datepick").attr("value",(MMtoday+"/"+DDtoday+"/"+Ytoday));
   	  	$("#datepick").trigger("change");

		$('[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
	         if(state==true){
	        	 $.ajax({
	        			url : "../updateData?str=shuibeng9&n="+1,
	        			cache : false,
	        			success : function(result) {
	             $("#device").attr("src","${contextPath}/resources/Picture/xunkong/sbtb/pump_red.png");
	             $("#state").html("开");
	             console.log($("#device").attr("src"));
			setTimeout(function(){$("#datepick").trigger("change")},5000);
	        			}
	        	 });
	         }else{
	        	 $.ajax({
	        			url : "../updateData?str=shuibeng9&n="+0,
	        			cache : false,
	        			success : function(result) {
	             		$("#device").attr("src","${contextPath}/resources/Picture/xunkong/sbtb/pump_blue.png");
	             		$("#state").html("关");
	             		console.log($("#device").attr("src"));
				setTimeout(function(){$("#datepick").trigger("change")},5000);
	        			}
	        	 });
	         }
	     });
	function loaddata(){
               $.ajax({
			url:"../loadData",
			cache:false,
			async:false,
			success:function(result){
				for(var i=0;i<result.length;i++){
					if(result[i].opcname=="DEMO.level"){
						$("#shuiwei").html(Math.round(result[i].opcvalue*100));
					}
				}
			}
	       })
	  }
  }());
</script>
</body>
</html>

